<template>
  <div class="fire-safety-assess-wrap">
    <!-- 标题 -->
    <div class="fire-safety-assess-title page-title-wrap" style="align-items:center;">
      <p class="page-title-name">
        <i class="iconfont icon_biaotijiantou" @click="$Ctl.backProvePage()"></i>
        <span class="page-title-text">{{organizationName}}消防安全评估</span>
      </p>
      <!-- 单位筛选框 -->
      <div style="margin-left:30px;">
        <el-select v-model="organizationId" filterable slot="prepend" placeholder="请选择单位" @change="init">
          <el-option v-for="item in orgList" :label="item.orgName" :value="item.orgId.toString()" :key="item.orgId"></el-option>
        </el-select>
      </div>
      <div class="disclaimer">
        <div @click="estimate">
          <div></div>
          <span>评估申明</span>
        </div>
        <div @click="relief">
          <div></div>
          <span>免责申明</span>
        </div>
      </div>
    </div>
    <!-- 评估弹窗 -->
    <el-dialog :visible.sync="estimateTc" width="30vw" class="hereby-certify" append-to-body :title="estimateTitle">
      <p>
        <span>【评估依据】</span>
        <br />本评估依据中华人民共和国消防法（2019）、消防安全责任制实施办法、人员密集场所消防安全评估导则（ GA/T1369-2016）等法规，采用层次分析法，通过对监测数据进行整合、抽离、赋权进行评估。
        <br />
        <br />
        <span>【评估方案】</span>
        <br />系统从消防设施单元、安全疏散设施单元、消防安全管理单元、建筑防火单元、客观情况以及直接判定项这6个维度对单位的消防安全状况进行实时评分。评分采用扣分制。总分上限为100.各单元扣分上限如下：
      </p>
      <div class="dialogFireDrill_data" v-for="(item,index) in dialogFireDrillData" :key="index">
        <p>
          <label></label>
          {{item.groupName}}
        </p>
        <p>{{item.maxScore}}</p>
      </div>
      <el-button type="primary" @click="estimateTc = false">确 定</el-button>
    </el-dialog>
    <!-- 免责弹窗 -->
    <el-dialog :visible.sync="reliefTc" width="30vw" class="hereby-certify" append-to-body :title="reliefTitle">
      <p>
        1、本评估虽按照相关法律法规指定，相对传统评估更具实时性优势，但仍然不能取代传统的线下人工评估。如不能
        监测到防火分区的完整性等。
        <br />
        <br />2、单位不应该过度依赖于本评估，着眼于单位的现场、实时情况，按照相关法规要求进行严格管理是非常必要的。
      </p>
      <el-button type="primary" @click="reliefTc = false">确 定</el-button>
    </el-dialog>
    <!-- 主展示区域 -->
    <div class="fire-safety-assess-maincontent">
      <!-- 上半部分 -->
      <div class="deduction-overview">
        <div class="radar"></div>
        <div class="overview-list-wrap">
          <div class="overview-center">
            <p class="center-title">{{organizationName}}</p>
            <p class="center-num" :style="{'color': currentColor}">{{ score }}</p>
            <p class="center-title" v-html="tips"></p>
          </div>
          <div
            v-for="(item, index) in scoreObjList"
            :key="index"
            class="overview-item"
            :class="['overview-type-' + (index+1), item.groupName==currentGroupName?'is-active':'']"
            @click="chooseGroupItem(item)"
          >
            <p class="item-title">{{ item.groupName }}</p>
            <p class="item-num" v-if="item.value > 0">{{ '-'+item.value }}</p>
            <p class="iconfont icon_duigou" v-else></p>
          </div>
        </div>
      </div>
      <!-- 下半部分 -->
      <div class="fire-safety-analysis-wrap">
        <div class="analysis-item">
          <!-- 安全态势分布 -->
          <div class="title-wrap">
            <p class="title-name">安全态势分布</p>
            <div class="selection-cycle">
              <span :class="{'active': distributionDateType == 1}" @click="distributionDateType = 1">日</span>
              <span :class="{'active': distributionDateType == 2}" @click="distributionDateType = 2">月</span>
              <span :class="{'active': distributionDateType == 3}" @click="distributionDateType = 3">年</span>
            </div>
          </div>
          <div class="analysis-item-content">
            <div id="situationDistribution" class="score-trend-echarts">
              <!-- echarts -->
            </div>
          </div>
        </div>
        <div class="analysis-item">
          <!-- 安全态势走势 -->
          <div class="title-wrap">
            <p class="title-name">安全态势走势</p>
            <div class="selection-cycle">
              <span :class="{'active': scoreTrendDateType == 1}" @click="scoreTrendDateType = 1">日</span>
              <span :class="{'active': scoreTrendDateType == 2}" @click="scoreTrendDateType = 2">月</span>
              <span :class="{'active': scoreTrendDateType == 3}" @click="scoreTrendDateType = 3">年</span>
            </div>
          </div>
          <div class="analysis-item-content">
            <div id="scoreTrendEcharts" class="score-trend-echarts">
              <!-- echarts -->
            </div>
          </div>
        </div>
        <div class="analysis-item">
          <!-- 扣分明细 -->
          <div class="title-wrap">
            <p class="title-name">扣分明细</p>
            <p class="explain-wrap">
              <span>总分100</span>
              <span>剔除重复扣分+{{ deductUseScore }}</span>
              <span>得分{{ score }}</span>
            </p>
          </div>
          <div class="analysis-item-content">
            <table>
              <thead>
                <tr>
                  <th width="25%">扣分单元</th>
                  <th width="65%">扣分明细</th>
                  <th width="10%">扣分</th>
                </tr>
              </thead>
            </table>
            <div class="tbody-wrap">
              <table>
                <tbody>
                  <tr v-for="(item, index) in detailScoreTableData" :key="index">
                    <td width="25%">{{ item.module }}</td>
                    <td width="65%">
                      <el-tooltip class="item" effect="dark" :content="item.detail">
                        <div class="ell">{{ item.detail }}</div>
                      </el-tooltip>
                    </td>
                    <td class="num" width="10%">{{ '-' + item.detailDeduction }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/styles/common/detailPage.scss'
import {
  getScoreItemDetail,
  getDeductDetail,
  getSafeEvaluateHistoryTrend,
  getSafeScoreCountByParam,
  getSafetyGroupMaxScore,
} from '@/api/safetyIndex'
import util from '@/utils/util'

let Echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/chart/pie')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')

let loaded = 0
let chartInst1 = ''
let chartInst2 = ''

export default {
  name: 'FireSafetyAssess',
  props: {
    parames: {
      require: true,
    },
  },
  data() {
    return {
      organizationId: this.parames ? this.parames.orgId.toString() : '',
      organizationName: '',
      score: '',
      currentColor: '',
      tips: '',
      scoreObjList: [], // 安全评估各维度扣分list
      deductUseScore: '', // 重复扣分值
      detailScoreTableData: [], // 扣分明细表格数据
      originDetailScoreTableData: [],
      distributionDateType: '1', // 安全态势分布 1近一日、2近1月、3近1年
      scoreTrendDateType: '1', // 安全态势时间周期 1近一日、2近1月、3近1年
      currentGroupName: '',
      orgList: this.$store.state.orgList,
      estimateTc: false, // 评估弹窗
      reliefTc: false, // 免责弹窗
      estimateTitle: '评估申明',
      reliefTitle: '免责申明',
      dialogFireDrillData: [], // 评估申明数据
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      loaded = 0
      this.organizationName = this.orgList.filter((n) => {
        return n.orgId == this.organizationId
      })[0].orgName
      this.score = ''
      this.currentColor = ''
      this.tips = ''
      this.scoreObjList = []
      this.deductUseScore = ''
      this.detailScoreTableData = []
      this.originDetailScoreTableData = []
      this.distributionDateType = '1'
      this.scoreTrendDateType = '1'
      this.currentGroupName = ''
      chartInst1 && chartInst1.clear()
      chartInst2 && chartInst2.clear()
      this.$Ctl.loading(1, 5000)
      // 获取六大扣分纬度数据
      this.getScoreItem()
      // 获取安全态势分布
      this.getSituationDistributionData()
      // 获取扣分明细数据
      this.getDetailInfo()
      // 获取安全态势走势
      this.getScoreTrend()
    },
    closeLoading() {
      if (loaded >= 4) {
        this.$Ctl.loading(0)
      }
    },
    chooseGroupItem(obj) {
      if (obj.groupName == this.currentGroupName) {
        this.currentGroupName = ''
      } else {
        this.currentGroupName = obj.groupName
      }
      if (this.currentGroupName == '') {
        this.detailScoreTableData = JSON.parse(
          JSON.stringify(this.originDetailScoreTableData)
        )
      } else {
        this.detailScoreTableData = this.originDetailScoreTableData.filter(
          (n) => {
            return n.module == obj.groupName
          }
        )
      }
    },
    getScoreItem() {
      let that = this
      getScoreItemDetail({
        orgId: that.organizationId,
      })
        .then((res) => {
          if (res.status === 200) {
            let newArr = []
            for (let key in res.data) {
              if (!isNaN(Number(key))) {
                newArr.push(res.data[key])
              }
            }
            that.scoreObjList = newArr
            that.score = res.data.score
            if (79.9 < that.score && that.score < 89.9) {
              //风险
              that.currentColor = 'rgba(253, 156, 39, 1)'
              that.tips =
                "<p style='color: rgba(253, 156, 39, 1)'>危险</p><p>需要及时整改</p>"
            } else if (that.score < 80) {
              //高危
              that.currentColor = 'rgba(224, 23, 75, 1)'
              that.tips =
                "<p style='color: rgba(224, 23, 75, 1)'>告急</p><p>需要立即处理"
            } else {
              //安全
              that.currentColor = 'rgba(73, 194, 149, 1)'
              that.tips =
                "<p style='color: rgba(73, 194, 149, 1)'>安全</p><p>请继续保持</p>"
            }
            that.deductUseScore = res.data.deductUseScore
          }
          loaded++
          this.closeLoading()
        })
        .catch(() => {
          loaded++
          this.closeLoading()
        })
    },
    // 评估申明弹窗
    estimate() {
      let _this = this
      getSafetyGroupMaxScore({
        orgId: _this.organizationId || '',
      }).then((res) => {
        if (res.status === 200) {
          _this.dialogFireDrillData = res.data
        }
      })
      _this.estimateTc = true
    },
    relief() {
      let _this = this
      _this.reliefTc = true
    },
    // 获取扣分明细
    getDetailInfo() {
      let that = this
      getDeductDetail({
        orgId: that.organizationId,
      })
        .then((res) => {
          if (res.status === 200) {
            that.detailScoreTableData = res.data
            that.originDetailScoreTableData = res.data
          }
          loaded++
          this.closeLoading()
        })
        .catch(() => {
          loaded++
          this.closeLoading()
        })
    },
    // 获取安全态势分布
    getSituationDistributionData() {
      let that = this

      getSafeScoreCountByParam({
        orgId: that.organizationId,
        dateType: that.distributionDateType,
      })
        .then((res) => {
          if (res.status === 200) {
            that.initSituationDistribution(res.data)
          }
          loaded++
          this.closeLoading()
        })
        .catch(() => {
          loaded++
          this.closeLoading()
        })
    },
    // 获取安全态势走势
    getScoreTrend() {
      let that = this
      getSafeEvaluateHistoryTrend({
        orgId: that.organizationId,
        dateType: that.scoreTrendDateType,
      })
        .then((res) => {
          if (res.status === 200) {
            that.initScoreTrendEcharts(res.data)
          }
          loaded++
          this.closeLoading()
        })
        .catch(() => {
          loaded++
          this.closeLoading()
        })
    },
    // 安全态势分布1/2饼图
    initSituationDistribution(data) {
      let value1 = data.securityDurationSum || 0
      let value2 = data.dangerDurationSum || 0
      let value3 = data.urgentDurationSum || 0
      let total = util.accAdd(util.accAdd(value1, value2), value3)
      let options = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let str = `${params.name}: ${params.value}（${util.completionDegree(
              params.value,
              total
            )}%）`
            return str
          },
        },
        color: [
          'rgba(73, 194, 149, 1)',
          'rgba(253, 156, 39, 1)',
          'rgba(224,23,75, 1)',
        ],
        legend: {
          show: true,
          top: 20,
          right: 0,
          orient: 'vertical',
          // top:'center',
          itemHeight: 18,
          itemWidth: 18,
          itemGap: 15,
          borderRadius: 18,
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
              },
              b: {
                fontSize: 14,
              },
            },
          },
          // 在文本中，可以对部分文本采用 rich 中定义样式。
          // 这里需要在文本中使用标记符号：
          // `{styleName|text content text content}` 标记样式名。
          // 注意，换行仍是使用 '\n'。
          formatter: function (name) {
            if (name == '安全') {
              return (
                '{a|安全}（{b|' +
                value1 +
                '小时，占比' +
                util.completionDegree(value1, total) +
                '%}）'
              )
            } else if (name == '危险') {
              return (
                '{a|危险}（{b|' +
                value2 +
                '小时，占比' +
                util.completionDegree(value2, total) +
                '%}）'
              )
            } else {
              return (
                '{a|告急}（{b|' +
                value3 +
                '小时，占比' +
                util.completionDegree(value3, total) +
                '%}）'
              )
            }
          },
          data: [
            {
              name: '安全',
              icon: 'none',
              textStyle: {
                color: '#6cbf98',
              },
            },
            {
              name: '危险',
              icon: 'none',
              textStyle: {
                color: 'rgba(253, 156, 39, 1)',
              },
            },
            {
              name: '告急',
              icon: 'none',
              textStyle: {
                color: 'rgba(224, 23, 75, 1)',
              },
            },
          ],
        },
        series: [
          {
            name: '安全',
            type: 'pie',
            //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: false,
            radius: ['140%', '157%'],
            center: ['30%', '96%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#fff',
                formatter: function (parames) {
                  return parames.value
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: util.accAdd(value1, util.accSub(total, value1)),
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0)',
                  },
                },
              },
              {
                value: value1,
                name: '安全',
                itemStyle: { color: 'rgba(73, 194, 149, 1)' },
              },
              {
                value: total - value1,
                name: '其他',
                itemStyle: { color: 'rgba(255,255,255,0.1)' },
                tooltip: { show: false },
              },
            ],
          },
          {
            name: '危险',
            type: 'pie',
            //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: false,
            radius: ['95%', '112%'],
            center: ['30%', '96%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#fff',
                formatter: function (parames) {
                  return parames.value
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: util.accAdd(value2, util.accSub(total, value2)),
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0)',
                  },
                },
              },
              {
                value: value2,
                name: '危险',
                itemStyle: { color: 'rgba(253, 156, 39, 1)' },
              },
              {
                value: total - value2,
                name: '其他',
                itemStyle: { color: 'rgba(255,255,255,0.1)' },
                tooltip: { show: false },
              },
            ],
          },
          {
            name: '告急',
            type: 'pie',
            startAngle: 0,
            hoverAnimation: false,
            radius: ['50%', '67%'],
            center: ['30%', '96%'],
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#fff',
                formatter: function (parames) {
                  return parames.value
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: util.accAdd(value3, util.accSub(total, value3)),
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0)',
                  },
                },
              },
              {
                value: value3,
                name: '告急',
                itemStyle: { color: 'rgba(224, 23, 75, 1)' },
              },
              {
                value: total - value3,
                name: '其他',
                itemStyle: { color: 'rgba(255,255,255,0.1)' },
                tooltip: { show: false },
              },
            ],
          },
        ],
      }
      chartInst1 = Echarts.init(
        document.getElementById('situationDistribution')
      )
      chartInst1.setOption(options, true)
    },
    // 安全态势走势折线图
    initScoreTrendEcharts(data) {
      let xArray = []
      let yArray = []
      let xName =
        this.scoreTrendDateType == 1
          ? '24小时内'
          : this.scoreTrendDateType == 2
          ? '1个月内'
          : '1年内'

      $.each(data, (index, obj) => {
        xArray.push(obj.createTime)
        yArray.push(obj.score)
      })
      //画图
      let options = {
        grid: {
          left: '40px',
          right: '10',
          top: '35',
          bottom: '30',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false,
          },
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: true },
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(105, 115, 125, 0.3)',
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              show: false,
            },
            name: xName,
            nameLocation: 'middle',
            nameTextStyle: {
              color: '#FFF',
            },
            data: xArray,
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(105, 115, 125, 0.3)',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#FFF',
                fontSize: 14,
              },
              //interval:xInterval
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(105, 115, 125, 0.3)',
                width: 1,
              },
            },
            name: '得分',
            nameTextStyle: {
              color: '#FFF',
            },
            min: 0,
            max: 100,
            splitNumber: 2,
            minInterval: 1,
          },
        ],
        series: [
          {
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            // areaStyle: { normal: {} },
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1.5, //折线宽度
                },
                color: '#2B6DBB', //折线颜色
              },
              emphasis: {
                color: '#2B6DBB',
              },
            },
            data: yArray,
          },
        ],
      }
      chartInst2 = Echarts.init(document.getElementById('scoreTrendEcharts'))
      chartInst2.setOption(options, true)
    },
  },
  watch: {
    distributionDateType(val, old) {
      if (val !== old) {
        this.getSituationDistributionData()
      }
    },
    scoreTrendDateType(val, old) {
      if (val !== old) {
        this.getScoreTrend()
      }
    },
  },
}
</script>
<style lang="scss">
.fire-safety-assess-wrap {
  padding: 0 30px 80px 30px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 20px 20px rgba(16, 55, 88, 0.3) inset;
  background-color: #061723;
  position: relative;
  .disclaimer {
    color: #fff;
    position: absolute;
    right: 30px;
    display: inline-flex;
    > div {
      padding: 0px 16px;
      line-height: 40px;
      font-size: 16px;
      color: #1474a2;
      background-color: #043256;
      cursor: pointer;
      margin-left: 10px;
      display: inline-flex;
      align-content: center;
      align-items: center;
    }
    > div:hover {
      color: #2cc3fe;
      background-color: #05497c;
    }
    > div:nth-child(1) {
      > div {
        background: url('../../../../assets/images/estimateRelief/estimate.png');
        width: 18px;
        height: 20px;
        margin-right: 6px;
        background-size: 18px 20px;
      }
    }
    > div:nth-child(1):hover {
      > div {
        background: url('../../../../assets/images/estimateRelief/estimate-on.png');
        width: 18px;
        height: 20px;
        margin-right: 6px;
        background-size: 18px 20px;
      }
    }
    > div:nth-child(2) {
      > div {
        background: url('../../../../assets/images/estimateRelief/relief.png');
        width: 20px;
        height: 20px;
        margin-right: 6px;
        background-size: 20px 20px;
      }
    }
    > div:nth-child(2):hover {
      > div {
        background: url('../../../../assets/images/estimateRelief/relief-on.png');
        width: 20px;
        height: 20px;
        margin-right: 6px;
        background-size: 20px 20px;
      }
    }
  }
  .fire-safety-assess-maincontent {
    height: cale(100% -80px);
    background: url(../../../../assets/images/detailPage/fire-safe-bg.png)
      center center no-repeat;
    background-size: cover;
    .deduction-overview {
      position: relative;
      height: 625px;
      .radar {
        zoom: 0.95;
        position: absolute;
        top: calc(50% - 126px);
        left: calc(50% - 654px);
        width: 1301px;
        height: 344px;
        border: 4px solid #3e8efb;
        font-size: 28px;
        border-radius: 50%;
        overflow: hidden;
        &::before {
          content: '';
          position: absolute;
          width: 650px;
          height: 650px;
          top: -483px;
          left: -7px;
          /*border: 1px solid white;*/
          background: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0) 50%,
            rgba(62, 142, 251, 1) 100%
          );
          border-radius: 100% 0 0 0;
          animation: scaning 6s linear infinite;
          transform-origin: 100% 100%;
          border-right: 2px solid #3e8efb;
        }
      }
      .overview-list-wrap {
        zoom: 0.95;
        position: relative;
        margin: 0 auto;
        width: 1860px;
        height: 100%;
        background: url(../../../../assets/images/detailPage/leida-bg.png)
          center 165px no-repeat;
        .overview-center {
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: center;
          left: 50%;
          top: 0px;
          margin-left: -240px;
          width: 480px;
          height: 479px;
          background: url(../../../../assets/images/detailPage/center-circle.png)
            center center no-repeat;
          background-size: cover;
          text-align: center;
          .center-title {
            margin: 0 auto;
            width: 38%;
            color: #fff;
            font-size: 28px;
            line-height: 46px;
          }
          .center-num {
            color: #f0a045;
            font-size: 100px;
            font-family: 'Mont-Regular';
            line-height: 110px;
          }
        }
        .overview-item {
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          font-weight: 500;
          background: url(../../../../assets/images/detailPage/item-bg.png)
            center center no-repeat;
          background-size: cover;
          cursor: pointer;
          // animation: heart 1.3s ease-in-out 2.7s infinite alternate;
          &.is-active {
            opacity: 0.7;
          }
          .item-title {
            margin: 0 auto;
            margin-top: 40px;
            width: 48%;
            color: #fff;
            font-size: 24px;
            line-height: 28px;
          }
          .item-num {
            color: #ce334f;
            font-size: 21px;
            line-height: 40px;
          }
          .icon_duigou {
            color: #47cfad;
            font-size: 24px;
            line-height: 40px;
          }
        }
        .overview-type-1 {
          width: 270px;
          height: 270px;
          top: 0px;
          left: 410px;
          animation: heart5 6s ease-in-out infinite;
          .item-title,
          .item-num {
            font-size: 20px;
          }
        }
        .overview-type-2 {
          width: 270px;
          height: 270px;
          top: 0px;
          right: 410px;
          animation: heart6 6s ease-in-out infinite;
          .item-title,
          .item-num {
            font-size: 20px;
          }
        }
        .overview-type-3 {
          width: 343px;
          height: 343px;
          top: 320px;
          right: 415px;
          animation: heart2 6s ease-in-out infinite;
        }
        .overview-type-4 {
          width: 318px;
          height: 318px;
          top: 115px;
          right: 0;
          animation: heart4 6s linear infinite;
        }
        .overview-type-5 {
          width: 343px;
          height: 343px;
          top: 320px;
          left: 415px;
          animation: heart1 6s ease-in-out infinite;
        }
        .overview-type-6 {
          width: 318px;
          height: 318px;
          top: 115px;
          left: 0px;
          animation: heart3 6s linear infinite;
          // animation: heart 1.3s ease-in-out 2.7s infinite alternate;
        }
      }
    }
    .fire-safety-analysis-wrap {
      margin: 0 auto;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 2600px;
      .analysis-item {
        padding: 20px 25px;
        width: 32%;
        max-width: 860px;
        height: 286px;
        background: #103758;
        .title-wrap {
          display: flex;
          justify-content: space-between;
          .title-name {
            color: #a3bedd;
            font-size: 28px;
          }
          .selection-cycle {
            display: flex;
            justify-content: space-between;
            width: 160px;
            span {
              padding: 0px 8px;
              line-height: 40px;
              font-size: 24px;
              color: rgba(20, 116, 162, 1);
              background-color: rgba(4, 50, 86, 1);
              cursor: pointer;
            }
            .active {
              color: rgba(44, 195, 254, 1);
              background-color: rgba(5, 73, 124, 1);
            }
          }
          .explain-wrap {
            color: #a3bedd;
            line-height: 40px;
            span {
              padding-left: 15px;
            }
          }
        }
        .analysis-item-content {
          width: 100%;
          .score-trend-echarts {
            width: 100%;
            height: 200px;
          }
          table {
            width: 100%;
            color: #fff;
            text-align: left;
            font-size: 16px;
            thead {
              th {
                height: 36px;
              }
            }
            tbody {
              td {
                height: 40px;
              }
              .num {
                color: #ce334f;
              }
            }
          }
          .tbody-wrap {
            height: 160px;
            overflow: auto;
            table {
              table-layout: fixed;
            }
          }
        }
      }
    }
  }
}
</style>
